<template>
 <div>
   <bread ref="bread"></bread>
   <el-card>
<!--     头部搜索和添加-->
       <el-row :gutter="20">
         <el-col :span="10">
           <el-input placeholder="请输入内容"  class="input-with-select" v-model="queryInfo.query" clearable @clear="getGoodsList">
             <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
           </el-input>
         </el-col>
         <el-col :span="4">
           <el-button type="primary" @click="addGoodsDialog=true">添加商品</el-button>
         </el-col>
       </el-row>
<!--     商品展示区域-->
     <template>
     <el-table :data="goodsList" border stripe>
       <el-table-column type="expand">
         <template v-slot="props">
           <el-form label-position="left" class="demo-table-expand">
             <el-form-item label="商品编号：">
               <span>{{ props.row.goods_id }}</span>
             </el-form-item>
             <el-form-item label="商品名称：">
               <span>{{ props.row.goods_name }}</span>
             </el-form-item>
             <el-form-item label="商品价格：">
               <span>{{ props.row.goods_price }}</span>
             </el-form-item>
             <el-form-item label="商品数量：">
               <span>{{ props.row.goods_number }}</span>
             </el-form-item>
             <el-form-item label="商品重量：">
               <span>{{ props.row.goods_weight }}</span>
             </el-form-item>
             <el-form-item label="商品状态：">
               <span v-if="props.row.goods_state=0">未通过审核</span>
               <span v-else-if="props.row.goods_state=1">审核中</span>
               <span v-else-if="props.row.goods_state=2">已审核</span>
             </el-form-item>
             <el-form-item label="创建时间：">
               <span>{{ props.row.add_time }}</span>
             </el-form-item>
             <el-form-item label="更新时间：">
               <span>{{ props.row.upd_time }}</span>
             </el-form-item>
             <el-form-item label="热销数量：">
               <span>{{ props.row.hot_mumber }}</span>
             </el-form-item>
             <el-form-item label="热销商品：">
               <span>{{ props.row.is_promote}}</span>
             </el-form-item>
           </el-form>
         </template>
       </el-table-column>
       <el-table-column type="index" label="#"></el-table-column>
       <el-table-column prop="goods_name" label="商品名称"></el-table-column>
       <el-table-column prop="goods_price" label="价格" width="60"></el-table-column>
       <el-table-column prop="goods_number" label="数量" width="60"></el-table-column>
       <el-table-column  label="操作" width="180">
         <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
         <el-button type="danger"  icon="el-icon-delete"size="mini">删除</el-button>
       </el-table-column>
     </el-table>
     </template>
<!--     分页-->
     <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="queryInfo.pagenum"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="queryInfo.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
     </el-pagination>
   </el-card>
<!--   添加商品的dialog-->
   <el-dialog title="添加商品" :visible.sync="addGoodsDialog">
     <el-form :model="addGoodsList">
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
         <el-input v-model="addGoodsList.goods_name"></el-input>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="addGoodsDialog = false">取 消</el-button>
       <el-button type="primary" @click="addGoodsDialog = false">确 定</el-button>
     </div>
   </el-dialog>
 </div>
</template>

<script>
import bread from "@/components/bread";
export default {
  name: "goods",
  components:{ bread },
  data(){
    return{
      queryInfo:{
        query: '',
        pagenum: 1,
        pagesize:10
      },
      total:0,
      goodsList:[],
      breadList:[],
      extendGoods:[],
      addGoodsDialog:false,
      addGoodsList:{
        goods_name:'',
        goods_cat:'',
        goods_price:'',
        goods_number:'',
        goods_weight:'',
        goods_introduce:'',
        pics:'',
        attrs:''
      }
    }
  },
  async created() {
    this.getGoodsList()
    const { data: res } = await this.$http.get('menus')
    this.breadList.push(res.data[2].authName)
    this.breadList.push(res.data[2].children[0].authName)
    this.$refs.bread.getBreadList(this.breadList)
  },
  methods:{
    //获取商品列表
    async getGoodsList(){
     const { data:res} = await this.$http.get('goods',{ params:this.queryInfo})
      this.goodsList=res.data.goods
      this.total=res.data.total
    },
    //展开商品列表
   async extendsGoodsList(id){
      const { data:res } = await this.$http.get(`goods/${ id }`)
      this.extendGoods=res.data
     console.log(res)
    },
    //分页
    handleSizeChange(newSize){
      this.queryInfo.pagesize=newSize
      this.getGoodsList()
    },
    handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage
      this.getGoodsList()
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}
.demo-table-expand .el-form-item {
  width: 90px;
  color:#606266;
  margin-right: 0;
  margin-bottom: 0;
  width:80%;
}
.demo-table-expand .el-form-item label{
  color: #1E9FFF;
}
</style>
